import QtQuick 1.0
import "../Util/Util.js" as Util


Rectangle {
    id: _root
    width: 200 * density
    height: _title.font.pixelSize * heightRatio
    gradient: Gradient {
        GradientStop {
            id: _grad1
            position: 0
            color: "#00000000"
        }
        GradientStop {
            id: _grad2
            position: 1
            color: "#00000000"
        }
    }
    border.color: "#00000000"

    property real heightRatio: 2.5          // 高さの倍率
    property real density: 1.0              // 密度

    property int itemIndex: -1              // データのインデックスというかキー
    property alias itemTitle: _title.text   // 表示する文字列

    property alias acceptedButtons: _mouseArea.acceptedButtons  // クリックで反応するボタン

    signal clicked(int itemIndex, variant mouse)
    signal heightChangedByDensity(real diff)

    function fontSizeAdjust(){
        if(_title.text === "-"){
            _title.font.pixelSize = 2;
            _title.visible = false;
            _line.visible = true;
        }else{
            _title.font.pixelSize = _Setting.fontPixelSizeContext * density;
            _title.visible = true;
            _line.visible = false;
        }
    }

    onDensityChanged: {
        fontSizeAdjust();
    }

    Text {
        id: _title
        color: "#dddddd"
        anchors.centerIn: parent
        font.pixelSize: _Setting.fontPixelSizeContext * density
        wrapMode: "WordWrap"

        onTextChanged: {
            fontSizeAdjust();
        }
    }

    Rectangle{
        id: _line
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: 5
        anchors.rightMargin: 5
        anchors.verticalCenter: parent.verticalCenter
        color: "#aaaaaa"
        height: 1
        visible: false
    }

    MouseArea {
        id: _mouseArea
        anchors.fill: parent
        hoverEnabled: true

        //クリック時にハイライトさせる
        onPressed: {
            if(_title.text === "-"){
            }else{
                _root.state = "pressed";
            }
        }
        onReleased: {
            _root.state = "";
        }

        //マウスオーバー
        onEntered: {
            if(_title.text === "-"){
            }else{
                _root.state = "hover";
            }
        }
        onExited: {
            _root.state = "";
        }
        onCanceled: {
            _root.state = "";
        }

        //クリック
        onClicked: {
            if(_title.text === "-"){
            }else{
                _root.clicked(itemIndex, mouse);
            }
        }
    }

    states: [
        State {
            name: "pressed"
//            when: _item.pressed
            PropertyChanges { target: _grad1; color: "#005555ff" }
            PropertyChanges { target: _grad2; color: "#33dd0000" }
        },
        State {
            name: "hover"
            PropertyChanges { target: _grad1; color: "#005555ff" }
            PropertyChanges { target: _grad2; color: "#33ffffff" }
        }

    ]


}
